<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      textColor: '#00e6ff',
      charts: '',
      xList: [],
      yList: [],
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options() {
      const Echarts = require('echarts')
      return {
        animation: true,
        title: {
          text: this.monitorName + '监测点风向风速变化曲线图',
          x: 'center',
          align: 'right',
          textStyle: {
            color: this.textColor
          }
        },
        grid: {
          left: 35,
          right: 20,
          bottom: 20,
          // 区域是否包含坐标轴的刻度标签
          containLabel: false
        },
        legend: {
          type: 'scroll',
          data: ['风速', '风向'],
          y: 'top',
          x: 'right',
          padding: [30, 100, 0, 0],
          // 设置为可滚动的图例
          type: 'scroll',
          textStyle: {
            color: this.textColor
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: (params) => {
            var contentArr = []
            contentArr.push(Format(new Date(params[0].value[0])))
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (data.seriesName == '风速') {
                contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + 'm/s')
              } else {
                contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + '°')
              }
            }
            let remark = params[0]?.data?.remark || ''
            remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
            return contentArr.join('<br/>')
          },

        },
        xAxis: {
          splitLine: {
            show: false
          },
          type: 'time',
          symbol: 'none',
          boundaryGap: false,
          axisLabel: { // 坐标轴标签样式设置
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              const date = new Date(value)
              if (date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0) {
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              }
              return Echarts.format.formatTime('hh:mm:ss', new Date(value))
            },
            show: true,
            textStyle: {
              color: this.textColor
            },
          },
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        },
        yAxis: [{
          name: '风速(m/s)',
          type: 'value',
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        }, {
          name: '风向(°)',
          type: 'value',
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        }],
        series: [
          {
            name: '风速',
            type: 'line',
            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.yList,
            markPoint: {
              symbolSize: 80,
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ],
              label: {
                position: "inside",
                distance: 7,
                formatter: function (data) {
                  return data.value + 'm/s'
                }
              },
              itemStyle: {
                color: '#1c85ff'
              }
            },
            itemStyle: {
              normal: {
                color: '#1c85ff'
              }
            },
          },
          {
            name: '风向',
            type: 'line',
            animation: true,
            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.xList
          },
        ]
      }
    }
  },
  methods: {
    updateEchart(data, monitorName) {
      this.charts.clear()
      this.charts.resize()
      this.monitorName = monitorName
      this.xList = data.direction;
      this.yList = data.speed;
      this.charts.showLoading({
        text : '正在加载数据'
      });
      this.charts.setOption(this.options)
      this.charts.hideLoading()
    },
  },
}
</script>
